<template>
<div class="scrollwarp" :style='{ height }'>
  <div>
    <div>
      <Serch :background=background></Serch>
      <div class="menu-area">
        <ul class="clearfix">
          <li>
            <i class="iconfont icon-rexiaochanpin"></i>
            <p>热销排行</p>
            </li>
          <li>
            <i class="iconfont icon-tejia"></i>
            <p>好价精选</p>
            </li>
          <li>
            <i class="iconfont icon-rili"></i>
            <p>当季新款</p>
            </li>
        </ul>
      </div>

      <div class="banner-area">
        <img src="http://shihuo.hupucdn.com/appZones/201701/1815/18dad2cc843300a3560cca54886957e5.png?imageView2/0/w/400/h/208/interlace/1" alt="">
        <a href="http://m.shihuo.cn/basketball">
        <div class="bg-color"></div>
        <div class="ban-txt">
          <div class="h2">
            <b>篮球</b>
            BASKETBALL
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-go_f747d60.png" alt="">
          </div>
          <div class="txt">
            <p>匹克闪现评测</p>
          </div>
          <div class="left">
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-1_2b1686e.png" alt="">
          </div>
          <div class="right">
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-2_9a175b7.png" alt="">
          </div>
        </div>
        </a>
      </div>

      <div class="tag-area">
        <div class="tag-list">
          <p><a href="#">篮球鞋</a></p>
          <p><a href="#">篮球服饰</a></p>
          <p><a href="#">篮球配件</a></p>
          <p><a href="#">篮球
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/icon-3_b996a60.png" alt="">
          </a></p>
        </div>
        <div class="tag-list">
          <p><a href="#">Nike</a></p>
          <p><a href="#">Adidas</a></p>
          <p><a href="#">Jordan</a></p>
          <p><a href="#">全部
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/icon-3_b996a60.png" alt="">
          </a></p>
        </div>
        <div class="bg-area"></div>
      </div>

      <div class="banner-area">
        <img src="http://shihuo.hupucdn.com/appZones/201701/1815/fa1b657f6d267f5ccb6c3213ba7cebd3.png?imageView2/0/w/400/h/208/interlace/1" alt="">
        <a href="#">
        <div class="bg-color"></div>
        <div class="ban-txt">
          <div class="h2">
            <b>跑步</b>
            RUNNING
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-go_f747d60.png" alt="">
          </div>
          <div class="txt">
            <p>户外跑鞋选购</p>
          </div>
          <div class="left">
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-1_2b1686e.png" alt="">
          </div>
          <div class="right">
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-2_9a175b7.png" alt="">
          </div>
        </div>
        </a>
      </div>

      <div class="tag-area">
        <div class="tag-list">
          <p><a href="#">跑步鞋</a></p>
          <p><a href="#">跑步服饰</a></p>
          <p><a href="#">跑步配件</a></p>
          <p><a href="#">运动补给
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/icon-3_b996a60.png" alt="">
          </a></p>
        </div>
        <div class="tag-list">
          <p><a href="#">Adidas</a></p>
          <p><a href="#">Asics</a></p>
          <p><a href="#">NewBalance</a></p>
          <p><a href="#">全部
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/icon-3_b996a60.png" alt="">
          </a></p>
        </div>
        <div class="bg-area"></div>
      </div>

      <div class="banner-area">
        <img src="http://shihuo.hupucdn.com/appZones/201701/1815/d5bdeb4f9dee46e6cf24e239da707bc3.png?imageView2/0/w/400/h/208/interlace/1" alt="">
        <a href="#">
        <div class="bg-color"></div>
        <div class="ban-txt">
          <div class="h2">
            <b>潮流</b>
            CASUAL
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-go_f747d60.png" alt="">
          </div>
          <div class="txt">
            <p>等8款超低价</p>
          </div>
          <div class="left">
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-1_2b1686e.png" alt="">
          </div>
          <div class="right">
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-2_9a175b7.png" alt="">
          </div>
        </div>
        </a>
      </div>

      <div class="tag-area">
        <div class="tag-list">
          <p><a href="#">鞋类</a></p>
          <p><a href="#">服饰</a></p>
          <p><a href="#">配件</a></p>
          <p><a href="#">耳机
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/icon-3_b996a60.png" alt="">
          </a></p>
        </div>
        <div class="tag-list">
          <p><a href="#">Converse</a></p>
          <p><a href="#">CASIO</a></p>
          <p><a href="#">Vans</a></p>
          <p><a href="#">全部
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/icon-3_b996a60.png" alt="">
          </a></p>
        </div>
        <div class="bg-area"></div>
      </div>

      <div class="banner-area">
        <img src="http://shihuo.hupucdn.com/appZones/201701/1815/f08e00fd62f3e0b2561e45c9f5db0272.png?imageView2/0/w/400/h/208/interlace/1" alt="">
        <a href="#">
        <div class="bg-color"></div>
        <div class="ban-txt">
          <div class="h2">
            <b>健身</b>
            FITNESS
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-go_f747d60.png" alt="">
          </div>
          <div class="txt">
            <p>热款 | Nike男子休闲运动短裤</p>
          </div>
          <div class="left">
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-1_2b1686e.png" alt="">
          </div>
          <div class="right">
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-2_9a175b7.png" alt="">
          </div>
        </div>
        </a>
      </div>

      <div class="tag-area">
        <div class="tag-list">
          <p><a href="#">健身装备</a></p>
          <p><a href="#">健身用品</a></p>
          <p><a href="#">营养补剂</a></p>
          <p><a href="#">全部类目
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/icon-3_b996a60.png" alt="">
          </a></p>
        </div>
        <div class="tag-list">
          <p><a href="#">Nike</a></p>
          <p><a href="#">Adidas</a></p>
          <p><a href="#">Lining</a></p>
          <p><a href="#">全部
            <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/icon-3_b996a60.png" alt="">
          </a></p>
        </div>
        <div class="bg-area"></div>
      </div>

      <div class="preferential">
                  <b>最新推荐</b>
                  <span>24小时淘不停</span>
                  <Equipment :equitems="equitems"></Equipment>
      </div>
    </div>
  </div>
</div>
</template>

<script>
//引入滚动
import BetterScroll from "better-scroll";
//引入搜索
import Serch from "@/components/Header/Serch"
//引入特惠详情
import Equipment from "@/components/Equipment/Equipment"

export default {
  data () {
    return {
        equitems:[],
        background:{
            background:'#f0f3f5'
        },
        height:0,
        //滚动对象
        scroll:null,
    }
  },
  components: {
    Serch,
    Equipment
  },
  mounted() {
    let url = "http://localhost:8080/data/Bshose.json";
    this.$axios.get(url).then((ret) => {
      // console.log(ret.data);
      this.equitems = ret.data;
      // console.log(this.dequitems);
    });
    //外层滚动容器高度
    this.height = document.documentElement.clientHeight - 51 + 'px'
    // console.log(this.height);
  },
  beforeDestroy(){
    this.scroll = null;
  },
  updated() {
    this.$nextTick(()=>{
      this.scroll = new BetterScroll('.scrollwarp',{
        click: true,
      })
    })
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/iconfont/iconfont.css";

.menu-area{
  height: 80px;
  text-align: center;
  background: #fff;
  color: #000;
  width: 100%; 
  .clearfix{
    display: flex;
    align-items: center;
    padding-top: 10px;
    li{
    width: 33.33%;
    padding: .33333rem 0;
    float: left;
    border-right: 1px solid #d4d4d4;

      p{
        font-size: 14px;
        margin-top: 7px;
      }
    }
    i{
      font-size: 28px;
    }
  }
}

.banner-area{
    height: 210px;
    position: relative;
    a{
      display: block;
    }
    .bg-color{
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 208px;
    background-color: #000;
    opacity: .5;
    }
    .ban-txt{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    top: -7.46667rem;
    text-align: center;
    color: #fff;
    .h2{
      font-size: 23px;
      text-shadow: 1px 1px 3px #666;
      margin-top: 145px;
      b{
        font-weight: 700;
      }
      img{
        width: 22px;
        height: 22px;
        display: inline-block;
        margin: .06667rem 0 0 .13333rem;
      }
    }
    .txt{
      font-size: 15px;
      text-align: center;
      p{
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0 auto;
      }
    }
    .left{
      position: absolute;
      left: 1.53333rem;
      top: 9.8rem;
      img{
        height: 130px;
        width: 25px;
      }
    }
    .right{
      position: absolute;
      right: 1.53333rem;
      top: 9.8rem;
      img{
        height: 130px;
        width: 20px;
      }
    }
    }
}
.tag-area{
  .tag-list{
    width: 100%;
    height: 45px;
    display: flex;
    border-bottom: 1px solid #ccc;
    justify-content: space-around;
    overflow: hidden;
    p{
      float: left;
      a{
      width: 90px;
      height: 100%;
      font-size: 14px;
      text-align: center;
      line-height:45px; 
      border-right: 1px solid #ccc;
      color: #000;
      display: block;
      float: left;
      img{
          width: 6px;
          vertical-align: middle;
          margin-left: .26667rem;
      }
    }
    }
  }
.bg-area{
  background-color: #f0f3f5;
  height: 10px;
}
}
.preferential{
      background: #fff ;
      padding: 14px;
      b{
          font-size:14px;
          margin-right: 5px;
      }
      span{
        font-size: 12px;
        color: #999;
        margin-bottom:15px;
      }
  }
  .scrollwarp{
    // width: 100%;
    overflow: hidden;
  }
</style>
